Como utilizar las Path variables para pasar informacion a nuestra aplicacion

Las Path variables son variables que forman parte de la propia URL

http://example.com/datos/maria

En este caso maria podria ser una path variable

Para leer Path Variables con angular lo hacemos de la siguiente manera:

Primero definimos la ruta y el nombre de la variable que vamos a utilizar en el archivo app-routing.module.ts

{ path: 'test/:name', component: TestComponent }

En este ejemplo estamos usando la ruta /test y como variable name, para indicar una variable en la ruta solo tenemos que poner los dos puntos ":" seguidos del nombre que le queramos dar a la variable

A continuacion en el archivo del componente, test.component.ts en mi caso, añadimos el siguiente import:

import { Router, ActivatedRoute, ParamMap } from '@angular/router';

Y dentro del constructor:

private route: ActivatedRoute

Y ahora para obtener el parametro lo hacemos de la siguiente manera dentro del ngOnInit, utilizamos la variable name para almacenar el parametro

  ngOnInit(): void {
          this.name = String(this.route.snapshot.paramMap.get('name'));
        }

El codigo dentro del componente quedaría tal que así:

Dentro del ngOnInit podemos usar un codigo alternativo como este:

ngOnInit(): void {
        this.route.params.subscribe(params => {
          this.name = params['name'];
        });
      }

Al acceder a una direccion como http://127.0.0.1:4200/test/textoDePrueba vemos que funciona correctamente

NOTA: el template del componente tiene que estar modificado para sacer la variable a la que le asignamos el parametro obviamente, en mi caso solo es:

<p>test works! variable: {{name}}</p>

Path variables | parameters